{% extends 'base.html' %}
{% load assets_tags %}
{% load static %}


  {% block title %}
  <title>资格管理系统</title>
  {% endblock title %}
		  
		  {% block leftnav %}
          <li class="nav-item">
            <a href="{% url 'assets:index' %}" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                仪表盘
              </p>
            </a>
          </li>
		  
		  <li class="nav-item">
            <a href="{% url 'assets:hardware' %}" class="nav-link">
              <i class="nav-icon fas fa-copy"></i>
              <p>
                硬件资产
              </p>
            </a>
          </li>
		  
		  <li class="nav-item">
            <a href="{% url 'assets:software' %}" class="nav-link">
              <i class="nav-icon far fa-credit-card"></i>
              <p>
                软件资产
              </p>
            </a>
          </li>
		  <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-history"></i>
              <p>
                日志审计
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="{% url 'assets:audit_login' %}" class="nav-link">
                  <i class="fas fa-user-edit nav-icon"></i>
                  <p>用户日志</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'assets:operation' %}" class="nav-link">
                  <i class="fas fa-wrench nav-icon"></i>
                  <p>操作日志</p>
                </a>
              </li>
            </ul>
          </li>
		  {% endblock leftnav %}

    {% block navheader %}
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-1 mt-2">
          <div class="col-sm-12">
            <h4>仪表盘</h4>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
	{% endblock navheader %}


		  {% block content %}
		  <div class="container-fluid">
			<div class="row">
				<div class="col-12">
				  <div class="card">
					  <div class="card-header border-transparent">
						<h4 class="card-title">设备状态<small> (百分比)</small>&nbsp;&nbsp;<i class="fas fa-chart-pie"></i></h4>

						<div class="card-tools">
						  <button type="button" class="btn btn-tool" data-widget="collapse">
							<i class="fas fa-minus"></i>
						  </button>
						  <button type="button" class="btn btn-tool" data-widget="remove">
							<i class="fas fa-times"></i>
						  </button>
						</div>
					  </div>
					  <!-- /.card-header -->
					  <div class="card-body" style="overflow:hidden;">
						<div class="row">
							<div class="col-xs-6 col-md-2 col-md-offset-1 text-center">
							  <input type="text" class="knob" value="{{ up_rate }}" data-width="120" data-height="120" data-fgColor="#00a65a" data-readonly="true">

							  <div class="knob-label">在线</div>
							</div>
							<!-- ./col -->
							<div class="col-xs-6 col-md-2 text-center">
							  <input type="text" class="knob" value="{{ o_rate }}" data-width="120" data-height="120" data-fgColor="#f56954" data-readonly="true">

							  <div class="knob-label">下线</div>
							</div>
							<!-- ./col -->


							<div class="col-xs-6 col-md-2 text-center">
							  <input type="text" class="knob" value="{{ bd_rate }}" data-width="120" data-height="120" data-fgColor="#932ab6" data-readonly="true">

							  <div class="knob-label">故障</div>
							</div>
							<!-- ./col -->
							<div class="col-xs-6 col-md-2 text-center">
							  <input type="text" class="knob" value="{{ bu_rate }}" data-width="120" data-height="120" data-fgColor="#3c8dbc" data-readonly="true">

							  <div class="knob-label">备用</div>
							</div>
							  <!-- ./col -->
							<div class="col-xs-6 col-md-2 text-center">
							  <input type="text" class="knob" value="{{ un_rate }}" data-width="120" data-height="120" data-fgColor="#cccccc" data-readonly="true">

							  <div class="knob-label">未知</div>
							</div>
							<!-- ./col -->
					    </div>
					  </div>
					  <!-- /.card-body -->
					</div>
				</div>
				
				<div class="col-12 col-sm-6">
				  <div class="card">
					  <div class="card-header border-transparent">
						<h4 class="card-title">各状态资产数量&nbsp;&nbsp;<i class="fas fa-chart-bar"></i></h4>

						<div class="card-tools">
						  <button type="button" class="btn btn-tool" data-widget="collapse">
							<i class="fas fa-minus"></i>
						  </button>
						  <button type="button" class="btn btn-tool" data-widget="remove">
							<i class="fas fa-times"></i>
						  </button>
						</div>
					  </div>
					  <!-- /.card-header -->
					  <div class="card-body" style="overflow:hidden;">
						<div><div id="barChart" style="max-width:100%;height:380px;"></div></div>
						<!-- /.table-responsive -->
					  </div>
					  <!-- /.card-body -->
					</div>
				</div>
				
				<div class="col-12 col-sm-6">
				  <div class="card">
					  <div class="card-header border-transparent">
						<h4 class="card-title">各类型资产数量&nbsp;&nbsp;<i class="fas fa-chart-pie"></i></h4>

						<div class="card-tools">
						  <button type="button" class="btn btn-tool" data-widget="collapse">
							<i class="fas fa-minus"></i>
						  </button>
						  <button type="button" class="btn btn-tool" data-widget="remove">
							<i class="fas fa-times"></i>
						  </button>
						</div>
					  </div>
					  <!-- /.card-header -->
					  <div class="card-body" style="overflow:hidden;">
						<div><div id="donutChart" style="max-width:100%;height:380px;"></div></div>
						<!-- /.table-responsive -->
					  </div>
					  <!-- /.card-body -->
					</div>
				</div>

			  <div class="col-12 col-sm-7">
				  <div class="card">
					  <div class="card-header border-transparent">
						<h4 class="card-title">最新硬件资产&nbsp;&nbsp;<i class="fas fa-copy"></i></h4>

						<div class="card-tools">
						  <button type="button" class="btn btn-tool" data-widget="collapse">
							<i class="fas fa-minus"></i>
						  </button>
						  <button type="button" class="btn btn-tool" data-widget="remove">
							<i class="fas fa-times"></i>
						  </button>
						</div>
					  </div>
					  
					  {% get_recent_asset as asset_list %}
					  <!-- /.card-header -->
					  <div class="card-body p-0">
						<div class="table-responsive">
						  <table class="table m-0">
							<thead>
							<tr>
							  <th>资产类型</th>
							  <th>资产名称</th>
							  <th>SN序列号</th>
							  <th>状态</th>
							  <th>添加时间</th>
							</tr>
							</thead>
							<tbody>
							{% for asset in asset_list %}
							<tr>
							  {% if asset.asset_type == 'server' %}
								  <td class="text-bold" style="color:green;">{{ asset.get_asset_type_display }}</td>
							  {% elif asset.asset_type == "networkdevice" %}
								  <td class="text-bold" style="color:gray;">{{ asset.get_asset_type_display }}</td>
							  {% elif asset.asset_type == "storagedevice" %}
								  <td class="text-bold" style="color:blue;">{{ asset.get_asset_type_display }}</td>
							  {% elif asset.asset_type == "securitydevice" %}
								  <td class="text-bold" style="color:red;">{{ asset.get_asset_type_display }}</td>
							  {% endif %}
							  {% if asset.asset_type == 'server' %}
							  <td><a href="{% url 'assets:detail' asset.id %}">{{ asset.name }}</a></td>
							  {% else %}
							  <td>{{ asset.name }}</td>
							  {% endif %}
							  <td>{{ asset.sn }}</td>
							  {% if asset.status == 0 %}
							  <td><label class="label label-success">{{ asset.get_status_display }}</label></td>
							  {% elif asset.status == 1 %}
							  <td><label class="label label-warning">{{ asset.get_status_display }}</label></td>
							  {% elif asset.status == 2 %}
							  <td><label class="label label-default">{{ asset.get_status_display }}</label></td>
							  {% elif asset.status == 3 %}
							  <td><label class="label label-danger">{{ asset.get_status_display }}</label></td>
							  {% elif asset.status == 4 %}
							  <td><label class="label label-info">{{ asset.get_status_display }}</label></td>
							  {% endif %}
							  <td>{{ asset.c_time|date:"Y/m/d H:m:s" }}</td>
							</tr>
							{% endfor %}
							</tbody>
						  </table>
						</div>
						<!-- /.table-responsive -->
					  </div>
					  <!-- /.card-body -->
					  <div class="card-footer clearfix">
						<!--a href="javascript:void(0)" class="btn btn-sm btn-info float-left">新增 + </a-->
						<a href="{% url 'assets:hardware' %}" class="btn btn-sm btn-secondary float-right">查看更多</a>
					  </div>
					  <!-- /.card-footer -->
					</div>
				</div>
				<div class="col-12 col-sm-5">
				  <div class="card">
					  <div class="card-header border-transparent">
						<h4 class="card-title">最新软件资产&nbsp;&nbsp;<i class="far fa-credit-card"></i></h4>

						<div class="card-tools">
						  <button type="button" class="btn btn-tool" data-widget="collapse">
							<i class="fas fa-minus"></i>
						  </button>
						  <button type="button" class="btn btn-tool" data-widget="remove">
							<i class="fas fa-times"></i>
						  </button>
						</div>
					  </div>
					  <!-- /.card-header -->
					  {% get_recent_software as software_list %}
					  <div class="card-body p-0">
						<div class="table-responsive">
						  <table class="table m-0">
							<thead>
							<tr>
							  <th>软件类型</th>
							  <th>软件/系统版本</th>
							  <th>授权数量</th>
							  <th>添加时间</th>
							</tr>
							</thead>
							<tbody>
							{% for software in software_list %}
							<tr>
							  <td>{{ software.get_sub_asset_type_display }}</td>
							  <td>{{ software.version }}</td>
							  <td>{{ software.license_num }}</td>
							  <td>{{ software.c_time|date:"Y/m/d H:m:s" }}</td>
							</tr>
							{% endfor %}
							</tbody>
						  </table>
						</div>
						<!-- /.table-responsive -->
					  </div>
					  <!-- /.card-body -->
					  <div class="card-footer clearfix">
						<!--a href="javascript:void(0)" class="btn btn-sm btn-info float-left">新增 + </a-->
						<a href="{% url 'assets:software' %}" class="btn btn-sm btn-secondary float-right">查看更多</a>
					  </div>
					  <!-- /.card-footer -->
					</div>
				</div>
			  </div>
			</div>
		  {% endblock content %}

{% block js %}
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="{% static 'adminlte/plugins/jquery-knob/jquery.knob.min.js' %}"></script>
<script>
// 顶部服务器状态百分率圆图
$(function () {
	/* jQueryKnob */

	$(".knob").knob({
		 /*change : function (value) {
   //console.log("change : " + value);
   },
   release : function (value) {
   console.log("release : " + value);
   },
   cancel : function () {
   console.log("cancel : " + this.value);
   },*/
  draw: function () {
		 // "tron" case
	if (this.$.data('skin') == 'tron'
			) {

	  var a = this.angle(this.

				cv)  // Angle
		  , sa = this.
						startAngle          // Previous start angle
		  , sat = this.startAngle         // Start angle
		  , ea                            // Previous end angle
		  , eat = sat + a                 // End angle
		  , r = true;

	  this.g.lineWidth = this.lineWidth;

	  this.o.cursor
	  && (sat = eat - 0.3)
	  && (eat = eat + 0.3);

	  if (this.o.displayPrevious) {
		ea = this.startAngle + this.angle(this.value);
		this.o.cursor
		&& (sa = ea - 0.3)
		&& (ea = ea + 0.3);
		this.g.beginPath();
		this.g.strokeStyle = this.previousColor;
		this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
		this.g.stroke();
	  }

	  this.g.beginPath();
	  this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
	  this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
	  this.g.stroke();

	  this.g.lineWidth = 2;
	  this.g.beginPath();
	  this.g.strokeStyle = this.o.fgColor;
	  this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
	  this.g.stroke();

	  return false;
	}
  }
});
/* END JQUERY KNOB */
});

$(function () {
        // 基于准备好的dom，初始化echarts实例
        var barChart = echarts.init(document.getElementById('barChart'));

        // 指定图表的配置项和数据
        var option = {
            color: ['#3398DB'],
            title: {
                text: '数量'
            },
            tooltip: {},
            legend: { data:['']
            },
            xAxis: {
                data: ["在线", "下线","故障","备用","未知"] },
            yAxis: {},
            series:
                [{
                name: '数量',
                type: 'bar',
                barWidth: '50%',
                data: [{{ upline }}, {{ offline }}, {{ breakdown }}, {{ backup }}, {{ unknown }}],
				//柱状图上显示数据
				label: {
					show: "true",
					position: "top",
					color: "#FFF",
					fontWeight: "bolder",
					backgroundColor: "auto",
					fontSize: "14",
				},
				itemStyle: {
					normal: {
						//每根柱子颜色设置
						color: function(params) {
							let colorList = [
								"#00a65a",
								"#f56954",
								"#932ab6",
								"#3c8dbc",
								"#cccccc",
							];
							return colorList[params.dataIndex];
						}
					}
				},
            }]
        };
            // 使用刚指定的配置项和数据显示图表。
            barChart.setOption(option);

    });

//资产类型数量统计 饼图
$(function () {
        // 基于准备好的dom，初始化echarts实例
        var donutChart = echarts.init(document.getElementById('donutChart'));

        // 指定图表的配置项和数据
        option = {
            title : {
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['服务器','网络设备','存储设备','安全设备','软件资产']
            },
            series : [
                {
                    name: '资产类型',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:{{ server_number }}, name:'服务器'},
                        {value:{{ networkdevice_number }}, name:'网络设备'},
                        {value:{{ storagedevice_number }}, name:'存储设备'},
                        {value:{{ securitydevice_number }}, name:'安全设备'},
                        {value:{{ software_number }}, name:'软件资产'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
            // 使用刚指定的配置项和数据显示图表。
            donutChart.setOption(option);
			
    });
	
	// echart 图表自适应大小
	window.onresize = function () {
		barChart.resize();
		donutChart.resize();
	}
	
</script>
{% endblock js %}